import React, { Component } from 'react';

/* 
  this 的三种修正方式
  1.render函数动态绑定this
  2.构造函数中修改this
  3.使用箭头函数(实际使用比较频繁)
*/
class App extends Component {
  state = {
    msg:'something',
  }
  /* 1.render函数动态绑定this */
  /* handleClick (){
    console.log(this);// undefined
    this.setState({
      msg:'other thing'
    })
  } */

  /* 2.构造函数中修改this */
  /* constructor(props) {
    super(props);
    // this.handleClick = this.handleClick.bind(this)
  } */

  /* 3.箭头函数方式 */
  handleClick = ()=>{
    this.setState({
      msg:'not this thing'
    })
  }

  render() {
    return (
      <div>
        {/* 1.render函数动态绑定this */}
        {/* <button onClick={this.handleClick.bind(this)}>点击</button> */}

        {/* 3.构造函数中修改this */}
        <button onClick={this.handleClick}>点击</button>
        <h1>{this.state.msg}</h1>
      </div>
    );
  }
}

export default App;
